<template>
  <el-card>
    <el-descriptions title="用户信息" direction="vertical" :column="4" border>
      <el-descriptions-item text-align="center" label="用户名"><div>{{ username }}</div></el-descriptions-item>
      <el-descriptions-item label="手机号"> <div>{{ phone }}</div></el-descriptions-item>
      <el-descriptions-item label="邮箱" > <div>{{ email }}</div></el-descriptions-item>
      <el-descriptions-item label="操作">
        <el-button class="color"  @click="gotolink1">更换绑定手机</el-button>
        <el-button class="color"  @click="gotolink2">更换绑定邮箱</el-button>
        <el-button class="color"  @click="gotolink3">修改密码</el-button>
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<script>
export default {
  name: 'personalCenter',
  data () {
    return {
      username: '',
      phone: '',
      email: ''
    }
  },
  mounted () {
    this.returnUsername()
    this.returnEmail()
    this.returnPhone()
  },
  methods: {
    returnUsername () {
      this.$axios.get('/getUsername')
        .then(response => {
          console.log(response.data.data)
          // const username = response.data.data
          this.username = response.data.data
          this.load()
        })
        .catch(error => {
          console.error(error)
        })
    },
    returnEmail () {
      this.$axios.get('/getEmail')
        .then(response => {
          console.log(response.data.data)
          // const email = response.data.data
          this.email = response.data.data
        })
        .catch(error => {
          console.error(error)
        })
    },
    returnPhone () {
      this.$axios.get('/getPhone')
        .then(response => {
          console.log(response.data.data)
          // const phone = response.data.data
          this.phone = response.data.data
        })
        .catch(error => {
          console.error(error)
        })
    },
    gotolink1 () {
      // 跳转至更换手机号
      this.$router.replace('/case/changePhoneNum')
    },
    gotolink2 () {
      // 跳转至更换邮箱
      this.$router.replace('/case/changeEmail')
    },
    gotolink3 () {
      // 跳转至更换密码
      this.$router.replace('/case/changePassword')
    },
    load () {
      const username = this.username
      if (!username) {
        this.$message.error('当前无法获取用户信息！')
        return
      }
      this.request.get('/user/username/' + username).then(res => {
        this.form = res.data
      })
    },
    save () {
      this.request.post('/user', this.form).then(res => {
        if (res.code === '200') {
          this.$message.success('保存成功')
          this.dialogFormVisible = false
          this.load()

          this.$emit('refreshUser')
        } else {
          this.$message.error('保存失败')
        }
      })
    },
    handleAvatarSuccess (res) {
      // res就是文件的路径
      this.form.avatarUrl = res
    }
  }
}
</script>
 <style scoped>
 .color {
   background-color:#42b983
 }
 </style>
